import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Icon, Tools, SearchBar } from 'weaver-mobile';
import { TabPage, SearchAdvanced } from 'weaver-mobile-page';
import { compareParams } from '../../../util';
import MyComment from './MyComment';
import MyPost from './MyPost';
import RouteModal from '../../communication/RouteModal';
const getLabel = Tools.getLabel;

/* 个人中心 -> 我的发表 */
@withRouter
@inject('centerStore')
@observer
export default class MyPublish extends React.Component {
  
  static defaultProps = {
    prefixCls: 'cowork-center-myPublish',
  }

  constructor(props) {
    super(props);
    this.state = {
      path: props.location.pathname + '/detail',
      coworkId: '',
      floor: '',
    }
  }

  componentDidMount() {
    const { centerStore: { publishStore } } = this.props;
    publishStore.getCoworkMineShareCondition();
  }

  componentWillUnmount() {
    const { centerStore: { publishStore } } = this.props;
    publishStore.clear();
  }

  render(){
    const { prefixCls,centerStore: { publishStore } } = this.props;
    const { setStoreState, onMyPostSearch, doMyPostReset, myPostAdValue, updateMyPostAdvance, myPostSearch, getMyCommentList, searchType } = publishStore;
    const tabs = [
      { key: 'all', title: getLabel(81733,'我的帖子'), searchType:'all'},
      { key: 'approve', title: getLabel(390676,'我的待审批帖子'), searchType:'approve' },
      { key: 'comment', title: getLabel(390677,'我的评论'), searchType:'comment' },
    ];
    const tabProps = {
      onChange: (tab) => { 
        doMyPostReset();
        setStoreState({ searchType: tab.searchType, relatePage: 1 });
      },
      page: searchType
    };
    const buttonGroupData = [
      { key: 'reset',
        text: getLabel(2022,'重置'),
        onClick: doMyPostReset
      },
      { key: 'submit',
        text: getLabel(826,'确定'),
        onClick: () => {
          if(searchType === 'comment') {
            getMyCommentList();
          } else myPostSearch();
          this.props.history.go(-1);
        },
        type: 'primary',
      }
    ];
    let compare = true;
    if (onMyPostSearch) {
      compare = compareParams(toJS(onMyPostSearch.form.formData), toJS(onMyPostSearch.form.defaultValues));
    }
    const adType = compare ? 'filter-o' : 'filter-o-hot';

    return (
      <div className={prefixCls}>
        <TabPage
          tabs={tabs}
          tabProps={tabProps}
        />
        <SearchBar 
          placeholder={getLabel(390678,'请输入发表内容')}
          value={myPostAdValue}
          showExtraButton
          extraButton={[
            { key: 'advanced', show: <Icon key={adType} type={adType} /> },
          ]}
          onExtraButtonClick={() => this.props.history.push(onMyPostSearch.path)}
          onChange={val => updateMyPostAdvance(val)}
          onSubmit={searchType === 'comment' ? getMyCommentList : myPostSearch}
        />
        <SearchAdvanced
          store={onMyPostSearch}
          buttonGroupData={buttonGroupData}
          onChange={(condition, value) => {if(condition.domkey[0] === 'remark') { setStoreState({ myPostAdValue: value }); }}}
        />
        {searchType === 'all' && <MyPost tagPage='myPost'/>}
        {searchType === 'approve' && <MyPost tagPage='waitApprove'/>}
        {searchType === 'comment' && <MyComment/>}
        <RouteModal/>
      </div>
    );
  }
}